<script setup lang="ts">
import { ref, onMounted } from 'vue';
import TaskItem from './TaskItem.vue';
import { fetchHistoryTasks } from './WebSocketService';

interface HistoryTask {
  task_id: string;
  task: string;
  task_status: string;
  task_result: string;
  expanded?: boolean;
}

const historyTasks = ref<HistoryTask[]>([]);
const isLoading = ref(false);

// 获取历史任务列表
const getHistoryTasks = async () => {
  try {
    isLoading.value = true;
    const tasks = await fetchHistoryTasks();
    // 为每个任务添加expanded属性，初始值为false
    historyTasks.value = tasks.map(task => ({
      ...task,
      expanded: false
    }));
  } catch (error) {
    console.error('获取历史任务失败:', error);
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  getHistoryTasks();
});
</script>

<template>
  <div>
    <h2 class="page-title">历史任务</h2>
    
    <div v-if="isLoading" class="loading-indicator">
      <div class="spinner"></div>
      <p>加载中...</p>
    </div>
    
    <div v-else-if="historyTasks.length === 0" class="empty-state">
      <p>暂无历史任务</p>
    </div>
    
    <div v-else class="task-list-wrapper">
      <div class="task-list">
        <div 
          v-for="task in historyTasks" 
          :key="task.task_id"
          class="task-item"
        >
          <div class="task-header" @click="task.expanded = !task.expanded">
            <div class="task-name">{{ task.task }}</div>
            <div 
              class="task-status" 
              :class="{
                'completed': task.task_status === 'finished',
                'failed': task.task_status === 'failed',
                'running': task.task_status === 'running'
              }"
            >
              {{ task.task_status === 'finished' ? '完成' : 
                 task.task_status === 'failed' ? '失败' : '进行中' }}
            </div>
          </div>
          <div v-if="task.expanded" class="task-details">
            <div class="task-description">{{ task.task }}</div>
            <div class="task-result">
              <div class="result-label">执行结果:</div>
              <div class="result-content">{{ task.task_result }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-title {
  margin-bottom: 20px;
  text-align: center;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 50px;
  color: #666;
}

.task-list-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.task-list {
  width: 70%;
}

.task-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: white;
}

.task-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
  align-items: center;
}

.task-name {
  font-weight: bold;
}

.task-status {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  font-size: 0.8em;
}

.task-status.completed {
  background-color: #d4edda;
  color: #155724;
}

.task-status.failed {
  background-color: #f8d7da;
  color: #721c24;
}

.task-status.running {
  background-color: #cce5ff;
  color: #004085;
}

.task-details {
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #f9f9f9;
}

.task-description {
  font-size: 0.9em;
  color: #666;
}
</style>